<template>
    <div>
        <el-page-header @back="goBack" content="MarkDown展示-API读取"/>
        <el-input v-model="searchKey" placeholder="检索问题" style="position: relative;;width: 70%;left: 0%" @keyup.enter.native="searchProblem"></el-input>
        <el-button @click="searchProblem"  type="primary" plain style="margin: 10px;">检索</el-button>
        <el-card>
            <el-table :data="searchData" style="width: 100%;font-size: 20px; max-height: 500px; overflow-y: auto;background-color: white;">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column label="列表项">
                        <template slot-scope="scope">
                        <span>{{ changePathName(scope.row )}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="primary" size="medium" @click="findMarkDown(scope.row)" style="font-size: 24px;">查看</el-button>
                            </div>
                        
                        </template>
                    </el-table-column>
                </el-table>
        </el-card>
        <!-- 展示区 -->
        <el-card style="position: relative;width: 100%;overflow-x: auto;" header="MarkDown处理文档">
            <div style="position: relative;">
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-if="htmlContent">
                <div v-html="htmlContent" class="v-md-header"></div>
              </el-card>
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-else>
                <div style="position: absolute;left:46.5%;text-align: center;line-height: 0px;font-weight: bold;">请检索并查看文档</div>
              </el-card>
            </div>
        </el-card>
    </div>
  </template>
  
  <script>
  import {searchProblemV2,findMarkDownBypathV2} from "../ajax/api"
  import MarkdownIt from 'markdown-it';
  import MarkdownItEmoji from 'markdown-it-emoji';
  import highlightjs from 'markdown-it-highlightjs';
  import mdAbbr from 'markdown-it-abbr'
  import mdAttrs from 'markdown-it-attrs'
  import mdDeflist from 'markdown-it-deflist'
  import mdFootNote from 'markdown-it-footnote'
  import mdMark from 'markdown-it-mark'
  import mdTable from 'markdown-it-multimd-table'
  import mdSub from 'markdown-it-sub'
  import mdSup from 'markdown-it-sup'
  import "../assets/css/markdown.css"
  import Prism from 'prismjs';
  import 'highlight.js/styles/github.css'; // 或者其他你选定的代码高亮主题
  export default {
    name: "MarkDown",
    data() {
      return {
        searchKey: "",
        searchData: [], // 检索到的问题列表
        markdownText: '', // 加载好图片的Markdown文本
        markdownRenderer: null,
        htmlContent: '',
      }
    },
    mounted() {
    this.markdownRenderer = new MarkdownIt()
      .use(MarkdownItEmoji)
      .use(highlightjs)
      .use(mdAbbr)
      .use(mdAttrs)
      .use(mdDeflist)
      .use(mdFootNote)
      .use(mdMark)
      .use(mdTable)
      .use(mdSub)
      .use(mdSup)
  
    this.parseMarkdown();
    Prism.highlightAll();
    
  },
  computed: {
    containerClass () {
      return window.innerWidth < 768 ? 'small-container' : 'large-container';
    }
  },
    methods: {
      goBack() {
        this.$router.push({ path: "/entry" })
      },
      searchProblem() {
        searchProblemV2(this.searchKey).then(res => {
            console.log("检索数据:",res);
            this.searchData = res.data.data;
            this.markdownText = "";
            this.htmlContent = "";
        })
      },
      findMarkDown(path) {
        console.log("path:",path);
        findMarkDownBypathV2(path).then(res => {
            console.log("markdown内容:",res);
            this.markdownText = res.data.data;
            this.htmlContent = this.markdownRenderer.render(this.markdownText);
            console.log(this.htmlContent);
            // document.getElementById('markdown-container').innerHTML = this.htmlContent;
        })
      },
      // 解析markdown
      parseMarkdown() {
        console.log("解析开始",this.markdownText);
        this.htmlContent = this.markdownRenderer.render(this.markdownText);
      },
     // 处理字符串
     changePathName(str) {
        if (str) {
            var lastIndex = str.lastIndexOf('/');
            var result = str.substring(lastIndex + 1);
            return result.replace('.md','');
        }
        return str;
     }
    }
  }
  </script>
  
  <style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid black;
    padding: 8px;
  }
  
  th {
    background-color: #f2f2f2; /* 设置表头的背景颜色 */
  }
  
  tr:nth-child(even) {
    background-color: #dddddd; /* 设置偶数行的背景颜色 */
  }
  
  tr:hover {
    background-color: #f5f5f5; /* 设置鼠标悬停时的背景颜色 */
  }
  h1,h2,h3,h4,h5{
    border-bottom: 1px #d8d6d6 solid;
  }
  img{
    width: 80%;
  }
  </style>